const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");   
const HtmlWebpackPlugin    = require("html-webpack-plugin");

let htmlPluginGenerate = function(name){  // 批量生成Html
	return {
		title: name + 'page',
		template: './src/view/'+ name +'.html',
    	filename: 'view/'+ name +'.html',
    	inject: true,
    	hash: true,
    	chunks:['base', name]
	}
}

module.exports = {
  mode:'development',
  entry: {
  	index:"./src/page/index/index.js",
  	login:"./src/page/login/index.js"
  },
  devServer: {
     contentBase: './dist/view'
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath:'/'
  },
  externals:{
  	'jquery':'window.jQuery'   //全局jQuery 
  },
  module:{
  	rules: [
    	{
    	  test: /\.css$/,
    	  use: [
    	     MiniCssExtractPlugin.loader,   // 把css分离出来
    	     'css-loader'
    	  ],
    	},
      {
        test: /\.(png|jpg|gif|eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name:"resource/[name].[ext]",
              limit: 4000
            }
          }
        ]
      }
    	// {
    	//   test: /\.html$/,
    	//   use: {
    	//     loader: 'html-loader'   //加载共用的模板不在这里使用htmlloader,但是要npm安装好。
    	//   }
    	// }
    ]
  },
  plugins: [
  	//把css打包到文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    //html 模板处理
    new HtmlWebpackPlugin(htmlPluginGenerate('index')),
    new HtmlWebpackPlugin(htmlPluginGenerate('login'))
  ],
  optimization:{
  	splitChunks:{
  		chunks:'all',
  		minSize:0,
  		name:'base'
  	}
  }
};